


import React, { useState } from "react"
import { Popup } from 'antd-mobile'
import { observer } from "mobx-react-lite"
import { useStore } from "@/store"
import { flutterSendData } from "../../rem"
function PageTop() {
    const store = useStore()
    const [visible, setVisible] = useState(false)
    return (
        <div className="pageTop" id="pageTop">
            <div className="leftText" onClick={() => setVisible(true)}>
                <i className="iconfont icon-caidan"></i>
                <img src="https://s.tuguaishou.com/editor/image/ai/pic_menu_aidraw.png" />
                <span>怪兽AI绘图</span>
            </div>
            <div className="rightPoint" onClick={() => { flutterSendData({ type: 'AIVipPage' }) }}>
                <i className="iconfont icon-AI"></i>
                <span>剩余点数：{store?.user?.pointNum}</span>
            </div>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false)
                }}

                getContainer={() => document.getElementById('h5aiMessage') as HTMLDivElement}
                position='left'
                bodyStyle={{ width: '50vw', background: '#0A0B17' }}
            >
                <div className="leftMenu">
                    <h1 className="title">
                        <div className="text">
                            <img src="https://s.tuguaishou.com/editor/image/ai/pic_menu_aidraw.png" />
                            <span>怪兽AI绘图</span>
                        </div>
                        <i className='iconfont icon-xiangzuo' onClick={() => setVisible(false)}></i>
                    </h1>
                    <ul className="menuArea">
                        <li className="menuItem">
                            <p>
                                <i className={`iconfont icon-AIgonggonghuitu`}></i>
                                <span>AI公共绘图</span>
                            </p>
                            <b className="tag">即将上线</b>
                        </li>
                        <li className="menuItem">
                            <p>
                                <i className={`iconfont icon-chuangyishequ`}></i>
                                <span>AI创意社区</span>
                            </p>
                            <b className="tag">即将上线</b>
                        </li>
                    </ul>
                    <ul className="menuArea">
                        <li className="menuItem active">
                            <p>
                                <i className='iconfont icon-yanse'></i>
                                <span>我的绘图区</span>
                            </p>
                        </li>
                    </ul>

                    <div className="botArea">
                        <div className="rightPoint">
                            <i className="iconfont icon-AI"></i>
                            <span>剩余点数：{store?.user?.pointNum}</span>
                        </div>
                        <div className="userInfo">
                            <div className="userText">
                                <img src={store?.user?.userInfo?.avatar || 'https://s.tuguaishou.com/index_img/head1.png'} alt="" />
                                <span>{store?.user?.userInfo?.username}</span>
                            </div>
                            {/* <strong>退出</strong> */}
                        </div>
                    </div>
                </div>
            </Popup>
        </div>
    )
}


export default observer(PageTop)